<template>
    <div class="shop">
        <div v-if="shopShow">
            <van-nav-bar :title="$t('mall.nav')" leftArrow @click-left="_return"/>
            <div class="shopMain">
                <ul>
                    <li v-for="item in nav" :class="item.id === navIndex ? 'active' : 'norwar'"  @click="showGoods(item)">{{item.cate_title}}</li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                nav:[],
                shopShow:true,
                good:{}
            }
        },
        methods: {
            _return(){
                this.$emit('_return')
            },
            getData(){
                this.$api.get('goods/goodsCate')
                    .then(res =>{
                        this.nav = res.detail
                    })
            },
            showGoods(item){
                this.$emit('showGood',item)
            }
        },
        created() {
            this.getData()
        },
        mounted() {

        },
        props:{
            navIndex:{}
        }
    }
</script>

<style lang="stylus" scoped>
    bac = linear-gradient(90deg,rgba(42,42,42,1) 0%,rgba(46,46,46,1) 100%) !important
    back = linear-gradient(90deg,rgba(203,175,137,1) 0%,rgba(219,200,170,1) 100%) !important
    font = #CBAF89
    fonts = #898989
    [class*=van-hairline]::after{
        border: none;
    }
    .active
        color #fff
        background #2bc299
    .norwar
        color #2bc299
        background #fff
        border 1px solid #2bc299
    .shopMain
        width 94%
        margin 0 auto
        ul
            display flex
            display -webkit-flex
            flex-flow row wrap
            justify-content space-between
            li
                width 49%
                text-align center
                height 50px
                line-height 50px
                border-radius 5px
                margin-top 8px

</style>